/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-06-23 12:37:05
 * @LastEditTime: 2024-07-07 15:15:19
 * @FilePath: /nest_study/web/src/views/system/user/components/info.tsx
 */

import DrawerWrapper from "@/components/drawer_wrapper"
import { Form, Input, message, Radio, Select, TreeSelect } from "antd"
import { TUserInfo } from "../index.type";
import { useEffect, useState } from "react";
import { addInfo, updateInfo } from "@/api/system/user";
import { rules } from "./rules";
import { sexList, statusList } from "../dictionary";
import { TRoleInfo } from "../../role/index.type";
import { TPostInfo } from "../../post/index.type";
import { TDeptInfo } from "../../dept/index.type";
import dept from "@/api/system/dept";
import role from "@/api/system/role";
import post from "@/api/system/post";

const ShowInfo = (props: any) => {
    let { info } = props;
    let initForm: TUserInfo = {
        userName: '',
        nickName: '',
        sex: '1',
        phone: '',
        email: '',
        remark: '',
        avatar: '',
        userType: "1",
        delFlag: '0',
        status: '0',
        deptIds: [],
        roleIds: [],
        postIds: [],
        loginIp: ''
    }
    const [form] = Form.useForm<any>();
    const [infoForm, _setInfoForm] = useState<TUserInfo>({ ...initForm, ...info });
    const [loading, setLoading] = useState<boolean>(false);
    //角色列表
    const [roleList, setRoleList] = useState<TRoleInfo[]>([]);
    //职位列表
    const [postList, setPostList] = useState<TPostInfo[]>([]);
    //部门列表
    const [deptList, setDeptList] = useState<TDeptInfo[]>([]);

    useEffect(() => {
        remoteBaseResource()
    }, [])

    //提交
    const submit = async () => {
        form.validateFields().then(async values => {
            setLoading(true)
            try {
                let info = { ...infoForm, ...values };
                if (info.id) {
                    await updateInfo(info);
                } else {
                    await addInfo(info);
                }
                message.success('操作成功');
                form.resetFields();
                props.submit();
            } finally {
                setLoading(false)
            }
        }).catch(info => {
            console.log('Validate Failed - ', info);
        });
    }
    //获取选择资源（角色 职位 部门）
    const remoteBaseResource = async () => {
        try {
            let deptResult = await dept.remoteList({ page: 1, size: 100 });
            let roleResult = await role.remoteList({ page: 1, size: 100, showMenu: 1 });
            let postResult = await post.remoteList({ page: 1, size: 100 });
            setDeptList(deptResult.data.list || []);
            setRoleList(roleResult.data.list || [])
            setPostList(postResult.data.list || [])
        } finally { }
    }
    return (
        <DrawerWrapper
            title="用户信息"
            loading={loading}
            close={() => props.close()}
            submit={() => submit()}
        >
            <Form
                form={form}
                name="info"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 17 }}
                initialValues={{ remember: false }}
                onFinish={submit}
                autoComplete="off"
            >
                <Form.Item label="账号" initialValue={infoForm.userName} name="userName" rules={rules.userName}>
                    <Input allowClear disabled={infoForm?.id ? true : false} placeholder="请输入账号" />
                </Form.Item>
                <Form.Item label="用户昵称" initialValue={infoForm.nickName} name="nickName" rules={rules.nickName}>
                    <Input allowClear placeholder="请输入用户昵称" />
                </Form.Item>
                <Form.Item label="手机号码" initialValue={infoForm.phone} name="phone" rules={rules.phone}>
                    <Input allowClear maxLength={11} placeholder="请输入手机号码" />
                </Form.Item>
                {
                    !infoForm?.id && <Form.Item label="密码" initialValue={infoForm.password} name="password" rules={rules.password}>
                        <Input.Password allowClear minLength={6} placeholder="请输入密码" />
                    </Form.Item>
                }
                <Form.Item label="部门" initialValue={infoForm.deptIds} name="deptIds">
                    <TreeSelect
                        showSearch
                        allowClear
                        style={{ width: '100%' }}
                        placeholder="请选择部门"
                        treeCheckable={true}
                        showCheckedStrategy={"SHOW_PARENT"}
                        treeData={[...deptList]}
                        fieldNames={{
                            label: 'name',
                            value: 'id'
                        }}
                    />
                </Form.Item>
                <Form.Item label="角色" initialValue={infoForm.roleIds} name="roleIds">
                    <Select
                        showSearch
                        allowClear
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="请选择角色"
                        optionFilterProp="label"
                        options={[...roleList]}
                        fieldNames={{
                            label: 'name',
                            value: 'id'
                        }}
                    />
                </Form.Item>
                <Form.Item label="职位" initialValue={infoForm.postIds} name="postIds">
                    <Select
                        showSearch
                        allowClear
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="请选择职位"
                        optionFilterProp="label"
                        options={[...postList]}
                        fieldNames={{
                            label: 'name',
                            value: 'id'
                        }}
                    />
                </Form.Item>

                <Form.Item label="性别" initialValue={infoForm.sex} name="sex" rules={rules.sex}>
                    <Radio.Group value={infoForm.sex}>
                        {
                            sexList.map(sex => {
                                return <Radio value={sex.value} key={sex.value}>{sex.label}</Radio>
                            })
                        }
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="邮箱" initialValue={infoForm.email} name="email">
                    <Input type="email" allowClear placeholder="请输入邮箱" />
                </Form.Item>
                <Form.Item label="状态" initialValue={infoForm.status} name="status">
                    <Select
                        style={{ width: '100%' }}
                        placeholder="请选择状态"
                        options={[...statusList]}
                    />
                </Form.Item>
                <Form.Item label="备注" initialValue={infoForm.remark} name="remark">
                    <Input.TextArea placeholder="请输入备注" />
                </Form.Item>
            </Form>
        </DrawerWrapper>
    )
}

export default ShowInfo